<script lang="ts" setup>
import { ref } from 'vue';
import city from '../lib/city';

const result = ref<string>('请选择');
const visible = ref<boolean>(false);
const radioValue = ref<string>('按城市');
const selectValue = ref<string>('');
const cities = ref(city.cities);
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
];

const clickItem = (item: string) => {
  result.value = item;
  visible.value = false;
};

const clickChat = (item: string) => {
  const el = document.getElementById(item);
  el && el.scrollIntoView();
};
</script>

<template>
  <el-popover v-model:visible="visible" placement="bottom-start" :width="430">
    <template #reference>
      <div class="choose-city-result" @click="visible = !visible">
        <div>{{ result }}</div>
        <div>
          <el-icon-arrowdown :class="{ rotate: visible }"></el-icon-arrowdown>
        </div>
      </div>
    </template>
    <div class="choose-city-content">
      <el-row>
        <el-col :span="8">
          <el-radio-group v-model="radioValue" size="small">
            <el-radio-button label="按城市"></el-radio-button>
            <el-radio-button label="按省份"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :offset="1" :span="15">
          <el-select v-model="selectValue" placeholder="请选择城市" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
      </el-row>
      <div class="city">
        <div v-for="(value, key) in cities" :key="key" class="city-item" @click="clickChat(key)">
          {{ key }}
        </div>
        <el-scrollbar max-height="300px" style="margin-top: 10px">
          <template v-for="(value, key) in cities" :key="key">
            <div class="city-group">
              <el-row :id="key" class="city-group-row">
                <el-col :span="2">{{ key }}:</el-col>
                <el-col :span="22" class="city-name-col">
                  <div v-for="item in value" :key="item.id" class="city-name-item" @click="clickItem(item.name)">
                    <div>{{ item.name }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-scrollbar>
      </div>
    </div>
  </el-popover>
</template>

<style lang="scss" scoped>
.choose-city-result {
  display: flex;
  width: fit-content;
  cursor: pointer;
  align-items: center;

  svg {
    position: relative;
    top: 2px;
    margin-left: 4px;
    transition: all 0.25s linear;
  }

  .rotate {
    transform: rotate(180deg);
  }
}
.city {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-item {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #eee;
    margin: 3px 3px 0 0;
    cursor: pointer;
    &:hover {
      background-color: #409eff;
    }
  }
}

.city-name-col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  .city-name-item {
    margin: 0 6px 0 0;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
      color: #409eff;
    }
  }
}
</style>
